<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQmusic</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="//y.qq.com/favicon.ico?max_age=2592000">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="wrap">
			<header>
				<i class="logo"></i>
				<a href="https://y.qq.com/m/download.html?channelId=10028634&autodown=1">下载APP</a>
			</header>
			<nav>
				<ul class="head_nav">
					<li class="n_active">推荐</li>
					<li>排行榜</li>
					<li>搜索</li>
				</ul>
			</nav>
			<section>
				
				<!--推荐-->
				<div class="recommend s_content s_active">
					<!--轮播-->
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					    </div>
					    <!-- 如果需要分页器 -->
					    <div class="swiper-pagination"></div>
					</div>
					<div class="tvb">
						<p>电台</p>
						<ul class="t_song">
							
						</ul>
					</div>
					<div class="hot_list">
						<p>热门歌单</p>
						<ul class="l_cont">
							
						</ul>
					</div>
					<p class="list_more"><a href="">去客户端发现更多好音乐 ></a></p>
					<footer class="mod_footer">
						<a class="version_tab" href="http://y.qq.com/?ADTAG=myqq&nomobile=1#type=index">查看电脑版网页</a>
						<div class="footer_logo"></div>
						<p class="copyright">Copyright © 1998 - <span>2018</span> Tencent. All Rights Reserved.</p>
						<p>联系电话：0755-86013388 QQ群：55209235</p>
					</footer>
				</div>
				
				<!--排行-->
				<div class="ranking_list s_content">
					<ul>
					</ul>
					<p class="topic_more">去客户端发现更多好音乐 ></p>
				</div>
				
				<!--搜索-->
				<div class="search s_content">
					<div class="s_frame">
						<div class="f_con">
							<i class="iconfont icon-fangdajing"></i>
							<input type="search" name="" id="" placeholder="搜索歌曲、歌单、专辑" />
						</div>
					</div>
					<div class="hot_keys">
						<h3>热门搜索</h3>
						<div class="result_tags">
							<a href="#" class="tag_s tag_hot">梦想的声音第二季</a>
						</div>
					</div>
				</div>
			</section>
			<footer></footer>
		</div>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript">
			//	轮播图
			var mySwiper = new Swiper ('.swiper-container', {
			    direction: 'horizontal',
			    loop: true,
			    autoplay: true,
			    observer:true,
			    observerParents:true,
			    // 如果需要分页器
			    pagination: {
			      el: '.swiper-pagination',
			      
			    },
			  })  
		</script>
		<script src="js/QQmusic.js"></script>
	</body>
</html>
